<template>
  <div class="tag-form-container">
    <!-- <el-form ref="tag-form" :model="form" :rules="rules" label-width="100px"> -->
    <el-row
      v-for="(item, index) in tagArr"
      :key="index"
      style="margin-bottom: 5px"
    >
      <el-col :span="11">
        <el-select
          v-model="item.key"
          placeholder="请选择标签"
          @change="updateTagvalue"
        >
          <el-option
            v-for="tig in tagTemplateData"
            :key="tig.prop"
            :label="tig.label"
            :value="tig.prop"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="11" class="left">
        <!-- <el-form-item :prop="item.prop"> -->
        <el-input
          v-model="item.val"
          @input="updateTagvalue"
          placeholder="标签内容"
        />
        <!-- </el-form-item> -->
      </el-col>
      <el-col :span="2" class="del">
        <i class="el-icon-delete delcolor" @click="delItem(index)"></i>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="8" :span="8" class="add">
        <addButton :contentText="'新增一行标签内容'" @addItem="addItem" />
      </el-col>
    </el-row>
    <!-- </el-form> -->
    <MessageBox
      ref="messageBox"
      :title="messageBoxtitle"
      :buttons="customButtons"
      @close="onmsgClose"
    />
  </div>
</template>

<script>
import { tagTemplate } from "./tagTemplate.js";
import MessageBox from "@/components/MessageBox/index.vue";
import addButton from "@/components/addButton/index.vue";
export default {
  name: "tagForm",
  components: {
    MessageBox,
    addButton,
  },
  props: {
    tags: {
      type: Array,
      default: () => [],
    },
    target: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    const tagTemplateData = tagTemplate;
    return {
      form: {},
      rules: {},
      tagArr: [],
      tagTemplateData: tagTemplateData,
      addOk: true,
      messageBoxtitle: "",
      customButtons: [],
    };
  },
  watch: {
    tags: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          this.tagArr = [];
          newVal.map((item) => {
            this.tagArr.push({
              key: item.key,
              val: item.val,
              prop: item.key + +new Date().getTime(),
            });
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    onmsgClose() {
      console.log("确认框已关闭");
    },
    delItem(index) {
      this.customButtons = [
        {
          text: "取消",
          action: () => this.$refs.messageBox.close(),
          type: "",
        },
        {
          text: "确定",
          action: () => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.tagArr.splice(index, 1);
            setTimeout(() => {
              this.$refs.messageBox.close();
              this.updateTagvalue();
            }, 100);
          },
          type: "primary",
        },
      ];
      this.messageBoxtitle = "确定删除该标签内容?";
      this.$refs.messageBox.open();
    },
    addItem() {
      if (this.addOk) {
        let obj = {
          key: "Shelf",
          val: "",
          prop: "Shelf" + new Date().getTime(),
        };
        this.tagArr.push(obj);
        this.updateTagvalue();
        this.addOk = false;
        setTimeout(() => {
          this.addOk = true;
        }, 100);
      }
    },
    updateTagvalue() {
      let tagArr = this.tagArr.map((item) => {
        return {
          key: item.key,
          val: item.val,
        };
      });
      this.$emit("update:tagArr", tagArr, this.target);
    },
  },
};
</script>

<style lang="scss" scoped>
.tag-form-container {
  .left {
  }
  .del {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    .el-icon-delete {
      cursor: pointer;
      font-size: 16px;
    }
  }
  .add {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
